<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<!-- import CSS -->
		<script src="../../js/commonJs.js"></script>
		<script src="../../js/commonCss.js"></script>
		<title>计划书管理</title>
		<style type="text/css">
			.answer .li span {
				width: 50px;
			}

			.pfprice {
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<div class="pd10 border-bottom ft-14 h40">
				<a href="planManage.html">
					<el-button type="text" icon="el-icon-arrow-left">返回</el-button>
				</a>
			</div>
			<div class="pd10">
				<el-form ref="form" :model="form" label-width="120px">
					<el-form-item label="产品名称：">
						<el-input type="text" v-model="form.iiaTitle" style="width:300px;"></el-input>
					</el-form-item>
					<el-form-item label="保险公司：">
						<el-select v-model="form.iiaComp" placeholder="请选择保险公司">
							<el-option :label="item.icTitle" :value="item.icId" v-for="item in companyArr" :key="item.icTitle"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="产品类别：">
						<el-select v-model="form.iiaType" placeholder="请选择产品类别">
							<el-option :label="item.iitTitle" :value="item.iitId" v-for="item in categoryArr" :key="item.iitTitle"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="缩略图：">
						<el-upload class="avatar-uploader" :action="ImgApiMore" :show-file-list="false" :on-success="handleAvatarSuccess1">
							<img v-if="iiaCover" :src="iiaCover" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
					<el-form-item label="PC图：">
						<el-upload class="avatar-uploader" :action="ImgApiMore" :show-file-list="false" :on-success="handleAvatarSuccess3">
							<img v-if="pcBanner" :src="pcBanner" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
                    <el-form-item label="资料：">
                        <el-upload
                                class="upload-demo"
                                :action="ImgApiMore"
                                :on-success='handleSuccess'
                                :on-remove="handleRemove"
                                :file-list="fileList"
                                style="width:600px;">
                            <el-button size="small" type="warning">点击上传资料</el-button>
                        </el-upload>
                    </el-form-item>
					<el-form-item :label="type==1?'保额':'保费'+'：'">
						<input type="file" style="display:block" id="imgFile" name="imgFile" accept=".xls" @change="handleFiles">
						<div slot="tip" class="el-upload__tip">只能上传xls</div>
						<el-button class="exitbtn" type="primary" @click="downTemplate">下载模版</el-button>
					</el-form-item>
					<el-form-item label="可选附加险：">
						<el-select v-model="form.iiaAdd" multiple placeholder="请选择附加险">
							<el-option :label="item.iaTitle" :value="item.iaId" v-for="item in risksArr" :key="item.iaTitle"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="计划书背景图：">
						<el-upload class="avatar-uploader" :action="ImgApiMore" :show-file-list="false" :on-success="handleAvatarSuccess2">
							<img v-if="iiaBanner" :src="iiaBanner" class="avatar">
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>

					<el-form-item label="计划书条目:">
						<div class="mb10" v-for="(item,index) in businessArr" >
							{{index+1}}. <el-input v-model="item.name" autocomplete="off" style="width:300px;" placeholder="身故保障"></el-input>
							<i class="el-icon-delete business-delete" @click="businessDelete(index)"></i>
							<div class="answer">
								<div v-for="(itemson,index2) in item.describe">
									<div class="li">
										<span>副标题:</span>
										<el-input v-model="itemson.name" autocomplete="off" style="width:270px;" placeholder="105种重疾险"></el-input>
									</div>
									<div class="li">
										<span>描述:</span>
										<el-input type="textarea" :rows="4" v-model="itemson.desc" style="width:270px;" placeholder="例:第1次确认重疾赔付$(保额*10%)"></el-input>
										<el-button class="exitbtn pfprice" type="warning" size="small" @click="addPayAmount(index,index2)">插入赔付金额</el-button>
										<i class="el-icon-delete" @click="describeDelete(index,index2)"></i>
									</div>
								</div>
								<div class="li">
									<span></span>
									<el-button type="primary" icon="el-icon-plus" @click="addDescribe(index)">添加副标题及描述</el-button>
								</div>
							</div>
						</div>
					</el-form-item>
					<el-form-item>
						<el-button class="exitbtn" type="primary" @click="addBusiness">添加模块</el-button>
					</el-form-item>

					<el-form-item label="病种说明:">
						<div class="mb10" v-for="(item,index) in diseasesArr">
							病种类别{{index+1}}. <el-input v-model="item.name" autocomplete="off" style="width:300px;" placeholder="105种重疾险"></el-input>
							<div class="answer">
								<div class="li">
									<el-input type="textarea" :rows="4" v-model="item.desc" style="width:270px;" placeholder="例:第1次确认重疾赔付$(保额*10%)"></el-input>
									<i class="el-icon-delete" @click="diseasesDelete(index)"></i>
								</div>
							</div>
						</div>
					</el-form-item>
					<el-form-item>
						<el-button class="exitbtn" type="primary" @click="addDiseases">添加说明</el-button>
					</el-form-item>
					<el-form-item>
						<el-button class="exitbtn" type="primary" @click="onSubmit" :loading="submit==0?true:false">保存</el-button>
					</el-form-item>
				</el-form>
			</div>
			<!-- 插入赔付金额 -->
			<el-dialog title="插入赔付金额" :visible.sync="dialogFormVisible" class="planForm">
				<el-form :model="amount" label-width="100px">
					<el-form-item label="赔付金额=">
						<el-select v-model="amount.payamount" placeholder="类型" style="width:100px;">
							<el-option :label="item.label" :value="item.label" v-for="item in payamountArr" :key="item.label"></el-option>
						</el-select>
						*
						<el-input type="text" v-model="amount.percet" style="width:80px;" placeholder="10"></el-input>%
					</el-form-item>
				</el-form>

				<div class="dialog-footer text-r">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="onpaySubmit">插 入</el-button>
				</div>
			</el-dialog>
		</div>
	</body>
	<script src="/jeefast/elementui-lib/lib/vue.js"></script>
	<script src="/jeefast/elementui-lib/lib/index.js"></script>
	<script src="/jeefast/js/jquery-1.9.1.min.js"></script>
	<script src="/jeefast/js/axios.js"></script>
	<script src="/jeefast/js/data.js"></script>
	<script>
		var app = new Vue({
			el: "#app",
			mixins: [mix],
			data: function() {
				return {
					id: "",
					type:"",
					ImgbaseUrl: ImgbaseUrl,
					update:false,
					baseUrl: baseUrl,
					ImgApiMore: uploadPic,
					iiaCover: "",
					pcBanner: "",
					submit:1,
					iiaBanner:"",
					isUpdate:0,
					banner: "",
					companyArr: [],
					categoryArr: [],
					risksArr: [],
					fileList:[],
					form: {
						iiaTitle: "",
						iiaComp:"",
						iiaCover: "",
						pcBanner: "",
						iiaBanner: "",
						category: "",
						isEven: false,
						iiaTips:"",
						iiaDisease:"",
                        iiaIType:1
					},
					formdata:"", 
					planform: {},
					// 赔付金额
					dialogFormVisible: false,
					payamountArr: [{
						value: '1',
						label: '保额'
					}, {
						value: '2',
						label: '保费'
					}],
					amount: {
						payamount: "",
						percet: ""
					},
					// 计划书条目
					businessArr:[{
						name:"",
						describe:[{
							name:"",
							desc:""
						}]
					}],
					// 病种说明
					diseasesArr:[{
						name:"",
						desc:""
					},{
						name:"",
						desc:""
					}],
					// 赔付金额 index index2
					pfIndex:'',
					pfIndex2:""
				}
			},
			methods: {
				/* 单张上传图片 */
				handleAvatarSuccess1: function(res, file) {
					this.iiaCover = URL.createObjectURL(file.raw);
					this.form.iiaCover = file.response.path;
				},
				/* 单张上传图片 */
				handleAvatarSuccess2: function(res, file) {
					this.iiaBanner = URL.createObjectURL(file.raw);
					console.log(file)
					this.form.iiaBanner = file.response.path;
				},
				/* 单张上传图片 */
				handleAvatarSuccess3: function(res, file) {
					this.pcBanner = URL.createObjectURL(file.raw);
					console.log(file)
					this.form.pcBanner = file.response.path;
				},
				// 插入赔付金额
				addPayAmount: function(index,index2) {
					this.dialogFormVisible = true
					this.pfIndex=index
					this.pfIndex2=index2
				},
				//获取excel文件
				handleFiles:function(){
					this.formdata.append('file', $("#imgFile")[0].files[0]);
					this.isUpdate = 1;
				},
				onpaySubmit: function() {
					let that = this
					let index = that.pfIndex
					let index2 = that.pfIndex2
					if (that.amount.payamount == "") {
						that.$message.error('类型不能为空');
						return
					}
					if (that.amount.percet == "") {
						that.$message.error('百分比不能为空');
						return
					}
					let descont = that.businessArr[index].describe[index2].desc
					let desc= '('+that.amount.payamount+'*'+that.amount.percet+'%)'
					that.businessArr[index].describe[index2].desc=descont+desc
					this.dialogFormVisible = false
				},
				// 添加计划书条目
				addBusiness:function(){
					let params={
						name:"",
						describe:[]
					}
					this.businessArr.push(params)
				},
				businessDelete:function(index){
					let that = this
					that.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						that.businessArr.splice(index,1)
						that.$message({
							type: 'success',
							message: '删除成功!'
						});
					}).catch(() => {
						that.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				},
				// 添加副标题及描述
				addDescribe:function(index){
					let params={
						name:"",
						desc:""
					}
					this.businessArr[index].describe.push(params)
				},
				describeDelete:function(index,index2){
					let that = this
					that.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						that.businessArr[index].describe.splice(index2,1)
						that.$message({
							type: 'success',
							message: '删除成功!'
						});
					}).catch(() => {
						that.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				},
				// 添加病种说明
				addDiseases:function(){
					let params={
						name:"",
						desc:""
					}
					this.diseasesArr.push(params)
				},
				diseasesDelete:function(index){
					let that = this
					that.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						that.diseasesArr.splice(index,1)
						that.$message({
							type: 'success',
							message: '删除成功!'
						});
					}).catch(() => {
						that.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				},
				// 确定
				IsNull: function() {
					let that = this;
					let flag = false;
					console.log(this.form.iaaTitle)
					if (that.form.iiaTitle == ""||that.form.iiaTitle == undefined) {
						this.$message.error('标题不能为空');
						this.submit=1;
						return flag = true;
					}
					console.log(this.update);
					if(that.update==false){
						if(that.isUpdate==0){
							this.$message.error('创建时费率表不能为空');
							this.submit=1;
							return flag = true;
						}
					}
					// if (this.form.pic == "") {
					// 	this.$message.error('展示图片不能为空');
					// 	return flag = true;
					// }
					// if (this.form.category == "") {
					// 	this.$message.error('类别不能为空');
					// 	return flag = true;
					// }
				},
				onSubmit: function() {
					let that = this;
					that.submit = 0;
					// this.formdata = new FormData();
					that.form.iiaTips = JSON.stringify(that.businessArr);
					that.form.iiaDisease = JSON.stringify(that.diseasesArr);
					that.form.iaaFile = JSON.stringify(that.fileList);
					if (that.IsNull()) {
						return;
					}
					console.log('===',that.form)
					console.log(this.iaaId)
					if(this.id!=null){
						this.formdata.append('iiaId', this.id);
					}
					this.formdata.append('iiaTitle',that.form.iiaTitle)
					this.formdata.append('iiaComp',that.form.iiaComp)
					this.formdata.append('iiaFile',JSON.stringify(that.fileList))
					this.formdata.append('iiaCover',that.form.iiaCover)
					this.formdata.append('banner',that.form.banner)
					this.formdata.append('category',that.form.category)
					this.formdata.append('isEven',that.form.isEven)
					this.formdata.append('iiaTips',that.form.iiaTips)
					this.formdata.append('pcBanner',that.form.pcBanner)
					this.formdata.append('iiaDisease',that.form.iiaDisease)
					this.formdata.append('iiaType',that.form.iiaType)
					this.formdata.append('iiaBanner',that.form.iiaBanner)
					this.formdata.append('iiaAdd',that.form.iiaAdd)
					this.formdata.append('iiaIType',that.type)
					// this.form.iiaIType = this.type;
					// console.log('===', that.formdata.append)
					$.ajax({
						type: "POST",
						// url: "http://122.14.213.160:7084/jeefast/iInsuredAmount/addPlan?token=admin",
						// url: "http://123.57.247.11/jeefast/iInsuredAmount/addPlan?token=admin",
						url: "http://www.u-banker.net/jeefast/iInsuredAmount/addPlan?token=admin",
						data: this.formdata,
						async: false,
						contentType: false,
						processData: false,
						success: function (res) {
							
						},
						error: function (res) {
							that.submit = 1;
						}
					})
// 					addPlan1(that.formdata).then(res=>{
// 						console.log(res);
// 					})
					window.location.href = 'planManage.html'; //此处拼接内容
				},
				/* 上传文件 */
				handleSuccess(res, file, fileList) {
					let that = this
					let params = {
						name:file.name,
						url:file.response.path
					}
					that.fileList.push(params)
					that.$message({
						message: '上传成功！',
						type: 'success'
					});
				},
				handleRemove(file, fileList) {
					for(let i=0;i<this.fileList.length;i++){
						if(file.uid == this.fileList[i].uid){
							this.fileList.splice(i,1)
						}
					}
				},
				// 下载模板
				downTemplate:function(){

				},
				//获取保险公司
				getcompanyList:function(){
					let that = this
					companyList({
						page: 1, //起始页面
						limit: 100000, //每页显示个数
					}).then(res=>{
						if(res.data.code==0){
							that.companyArr = res.data.data;
						}
					})
				},
				// 获取保险分类
				getInsuranceTypeList:function(){
					let that = this
					insuranceTypeList({
						page: 1, //起始页面
						limit: 100000, //每页显示个数
					}).then(res=>{
						if(res.data.code==0){
							that.categoryArr = res.data.data;
						}
					})
				},
				// 附加险
				getAdditionalList:function(){
					let that = this
					additionalList({
						page: 1, //起始页面
						limit: 100000, //每页显示个数
					}).then(res=>{
						if(res.data.code==0){
							that.risksArr = res.data.data;
							console.log(that.risksArr)
						}
					})
				}
			},
			created() {
				let that = this;
				//获取保险公司
				that.getcompanyList()
				//获取保险分类
				that.getInsuranceTypeList()
				//获取附加险
				that.getAdditionalList()
				//重新写一个表单上传的方法
				that.formdata = new FormData();
				this.id = getQueryString("id");
				if (this.id == null) {
					console.log('==添加')
					this.type = getQueryString("type");
					this.form.iiaIType = this.type;
				} else {
					console.log('==编辑')
					this.update = true;
					planDetail({id:that.id}).then(res=>{
						console.log(res.data.data)
						that.form = res.data.data;
						that.iiaCover = ImgbaseUrl+res.data.data.iiaCover;
						that.iiaBanner = ImgbaseUrl+res.data.data.iiaBanner;
						that.pcBanner = ImgbaseUrl+res.data.data.pcBanner;
						that.businessArr = JSON.parse(res.data.data.iiaTips);
						that.diseasesArr = JSON.parse(res.data.data.iiaDisease)
						//可选附加险
						let arr = res.data.data.iiaAdd.split(',')
						let arr2=[]
						for(let i=0;i<arr.length;i++){
							arr2.push(Number.parseInt(arr[i]))
						}
						this.form.iiaAdd=arr2
						if(res.data.data.iiaFile!=null){
							that.fileList = JSON.parse(res.data.data.iiaFile);
						}
						console.log(that.fileList)
					})
				}

			},
		});
	</script>
</html>
